陣列

物件在 JavaScript 中是一種用來儲存鍵值對（key-value pairs）的資料結構。每個鍵（key）都是一個屬性名稱，每個值（value）可以是任意類型的數據（例如數字、字串、函數或甚至其他物件）。

物件的定義與使用

1. 建立物件
   物件使用大括號 {} 來定義，並在內部使用 key: value 來表示鍵值對。這是最基本的物件語法：

const person = {
  name: "John",   // key 是 'name'，value 是 'John'
  age: 30,        // key 是 'age'，value 是 30
  isStudent: true // key 是 'isStudent'，value 是 true
};

2. 存取物件屬性
   有兩種方式可以存取物件的屬性：
   點記法 (Dot Notation): 使用點號 . 來存取物件屬性。

console.log(person.name); // 輸出: "John"
console.log(person.age);  // 輸出: 30

中括號記法 (Bracket Notation): 使用中括號 [] 來存取屬性，可以使用字串作為鍵名。

console.log(person["name"]);  // 輸出: "John"
console.log(person["age"]);   // 輸出: 30

何時用中括號？ 當鍵是變數或包含特殊字元（如空格）時，必須使用中括號。

3. 新增或修改屬性
   物件是可變的，可以隨時新增或修改屬性：

person.gender = "male";        // 新增屬性
person.age = 31;               // 修改屬性
console.log(person.gender);    // 輸出: "male"
console.log(person.age);       // 輸出: 31

4. 刪除屬性
   使用 delete 關鍵字可以刪除物件中的屬性：

delete person.isStudent;
console.log(person.isStudent); // 輸出: undefined

常見錯誤

我一開始會用成錯誤的混用方式，元素應該用數字索引來訪問，而不是像物件那樣使用鍵值對的形式。

const bmiStatesData = [
  "overThin"= {
    "state": "過輕",
    "color": "藍色"
  },
]
// 這是錯誤的程式碼

使用物件結構：

const bmiStatesData = {
  "overThin": {
    "state": "過輕",
    "color": "藍色"
  }
};

使用陣列並保留鍵作為屬性：

const bmiStatesData = [
  {
    "key": "overThin",
    "state": "過輕",
    "color": "藍色"
  }
];

關於引號

在 JavaScript 中，引號主要用來標示字串，當在物件中使用引號來包裹屬性的名稱時，它的主要意義是讓屬性名稱被視為字串。下面詳細說明引號的作用：

1. 引號 vs. 無引號
   當屬性名稱不包含特殊字元或空格時，引號是可選的，也就是說 name 和 "name" 在物件中是一樣的。
   例如，以下兩種寫法是一樣的：

const person = {
  name: "Alice",
  age: 25
};

const personWithQuotes = {
  "name": "Alice",
  "age": 25
};

特殊字元或空格存在於屬性名稱中時，必須使用引號包裹屬性名：

const obj = {
  "first name": "Alice",   // 使用空格
  "is-student": true       // 使用連字符
};

如果不加引號，這樣的屬性名會被視為無效語法。

2. 使用引號的情況
   保留字：如果屬性名稱是 JavaScript 的保留字（如 default、class、function 等），你也應該使用引號來避免語法錯誤：

const settings = {
  "class": "basic",   // 'class' 是保留字，必須加引號
  "default": true     // 'default' 也是保留字
};

動態屬性：當使用變數作為屬性名時，需要使用中括號而非引號：

const key = "age";
const person = {
  [key]: 30  // 動態屬性名
};
console.log(person.age);  // 輸出: 30

3. 引號的規範
   當屬性名是有效的 JavaScript 標識符（字母、數字、下劃線 _ 或美元符號 $ 開頭，並且不包含空格或特殊符號），你可以選擇省略引號；但如果屬性名包含特殊字元、空格或不符合命名規則，那就必須加上引號。

const validObject = {
  name: "Alice",   // 沒有引號，因為 'name' 是合法的標識符
  "first name": "Alice",  // 必須加引號，因為包含空格
  age: 25,
  "is-student": true,  // 必須加引號，因為包含連字符
  "$special_value": 100  // 可以不加引號，因為 '$' 是有效的標識符字符
};